<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    .men > li{
        display: inline-block;
        background-color: red;
    }

    ul{
        display: none;
    }
    .men{
        display: block;
    }
    .aa{
        background-color:"salmon";
        border-bottom:'1px solid #fff';
        cursor:'pointer'
    }
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("ul.men > li").mouseenter(function(){
        // alert(1)
        $(this).find("ul").css({"position":"absolute","display":'block'});
        $(this).find("ul>li").addClass('aa')
    }).mouseleave(function(){
        // alert(2)
        $(this).find("ul").css("display",'none');
    })
});
</script>
</head>
<body>
<ul class="men">
    <li>
        
        <a href="">微博</a>
        <ul>
            <li>
                
                <a href="">私信</a>
            </li>
            <li><a href="">私信</a></li>
            <li><a href="">私信</a></li>
        </ul>
    </li>
    <li>
        <a href="">微博</a>
        <ul>
            <li>私信</li>
            <li>评论</li>
            <li>@我</li>
        </ul>
    </li>
    <li>
        <a href="">微博</a>
        <ul>
            <li>私信</li>
            <li>评论</li>
            <li>@我</li>
        </ul>
    </li>
    <li>
        <a href="">微博</a>
        <ul>
            <li>私信</li>
            <li>评论</li>
            <li>@我</li>
        </ul>
    </li>
</ul>

</body>
</html>